<html>
<head>
    <title>JsUpload demo, Manolo Carrasco, 2009</title>
    <style type="text/css">
    body {
        font-family:verdana,arial,helvetica,clean,sans-serif;
        font-size: 12px;
    }
    h1, .jsubox, p, .center {
        margin-top: 5px;
        margin-left: auto;
        margin-right: auto;
        width: 450px; 
    }
    h1 {
       font-size: 16px;
    }
    .jstext {
       font-size: 12px;
    }
    .jsubox {
        border: 3px groove pink;
        padding: 5px; 
    }
    .jsucode {
      font-size: 10px;
      background: #d4e4ff;
      background: beige;
      border: 1px solid #999999;
      padding-top: 4px;
      width: 420px;
      margin-left: auto;
      margin-right: auto;
    }
    body {
        padding: 0px;
        margin: 0px;
        background-repeat: no-repeat;
        background: #879AAB;
        background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#879AAB)) fixed;
        background: -moz-linear-gradient(top,  #fff,  #879AAB) fixed;
        filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#879AAB');
    }
    .backPanel {
        color: blue;
        float: left;
        font-size: 12px;
        padding: 10px;
        text-decoration: underline;
    }
    </style>
</head>
<body>
   <script language="javascript" src="jsudev.nocache.js"></script>
   <script language="javascript" src="jsupload.nocache.js"></script>
   <script id='jsexample'>
      // Method called after the JsUpload library has been loaded
      function jsuOnLoad() {
        new jsu.Upload({
          type: "incubator",
          containerId: "uploader1",
          multiple: true, 
          auto: true,
          /* 
           * Uncomment the next line to handle actions when 
           *  the upload status changes
           */ 
          // onStatus: function(data) { alert(data.status); },
          onFinish: loadImage
        });
        
        new jsu.Upload({
           containerId: "uploader2",
           multiple: true, 
           auto: true,
           chooser: "anchor",    
           onFinish: loadImage
        });
        
        new jsu.Upload({
          type: "basic",
          containerId: "uploader3",
          multiple: true, 
          auto: true,
          onChange: null,
          onStart: null,
          onFinish: loadImage,
          chooser: "button",    
          maxFiles: 4,
          regional: {
              uploadStatusSuccess: "File saved in the server",
              uploadStatusError:   "Unable to save the file.",
           	  uploadBrowse: "Select a file to save ..."    
          }
        });

        var u = new jsu.Upload({
          type: "basic",
          containerId: "uploader4",
          onFinish: loadImage,
          regional: {
        	uploaderSend: "Send File."    
          }
        });
        
        // This enables php apc progress mechanism
        var e = document.createElement("INPUT")
        e.type = "hidden";
        e.name = "APC_UPLOAD_PROGRESS";
        e.value = u.data().name;
        u.addElement(e, 0);

        new jsu.Upload({
          containerId: "uploader5",
          onFinish: loadImage,
          chooser: "label",    
          uploadBrowse: "",
          validExtensions: ".jpg, .gif, .png",
          regional: {
        	uploaderSend: "Upload it.",
        	uploadBrowse: "Select an image from your computer..."    
          }
        });
        
        // Method to show a picture using the class PreloadImage
        // The image is not shown until it has been sucessfully downloaded
        function loadImage(upl_data) {
           if (upl_data && upl_data[0] && upl_data[0].url) {
        	 for (i = 0; i < upl_data.length; i++) {
        		loadImage(upl_data[i]);
        	 }
           } else if (upl_data && upl_data.url) {
              var image = new jsu.PreloadImage({
                url: upl_data.url,
                containerId: "photos",
                onLoad: function(img_data) {
                  image.setSize(100, -1);
                }
              });
           }
        }
      }
   </script>
   		<div id="back" class="backPanel">
		  <a href="javascript:window.location = '../index.html' + window.location.search;">&laquo; back </a>
		</div>
   
   <h1 class="center"><i>JsUpload</i> examples</h1>
   <div class="center jstext">
   <ul>
   <li>
    JsUpload is the exported version of the <a target="_blank" href='http://code.google.com/p/gwtupload'>GwtUpload</a> library. <br/>
    </li>
    <li>
    Because it is pure javascript, any user can utilize the uploaders inserting only a few lines of code in the page.<br/>
    </li>
    <li>
    Take a look to the <a target="_blank" href='http://code.google.com/p/gwtupload/wiki/JsUpload_Documentation'>documentation</a> to see all the available options and how to configure the server side.
    </li>
    </ul>
   </div>
   <div id="uploader1" class="jsubox"><br><br></div>
   <div id="uploader2" class="jsubox"><br><br></div>
   <div id="uploader3" class="jsubox"><br><br></div>
   <div id="uploader4" class="jsubox"><br><br></div>
   <div id="uploader5" class="jsubox"><br><br></div>
   <div id="photos" class="jsubox"> <br></div>
   <script>
       // Hack to insert each example in a div
       var jscode = document.getElementById("jsexample").innerHTML;
       var jsparts = jscode.split(/new\s*jsu.Upload/);
       for (i=1; i<jsparts.length; i++) {
         var div = document.getElementById("uploader" + i);
         var code = "        new jsu.Upload" + jsparts[i].replace(/\n/img,'ç').replace(/(}\);).*$/im,'$1').replace(/ç/g,"\n");
         div.innerHTML = '<pre class="jsucode">' + code + '</pre>';
       }
   </script>

    <!-- 
         Google Analytics code for the gwtupload project's web site.
         Remove it if you deploy this sample in your site 
    -->
	<script type="text/javascript">
	  document.write(unescape("%3Cscript src='http://www.google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
	</script>
	<script type="text/javascript">
	  try {var pageTracker = _gat._getTracker("UA-645641-9");pageTracker._trackPageview();} catch(err) {}
	</script>
		   
   <iframe src="javascript:''"  id="__gwt_historyFrame" style="width:0;height:0;border:0"></iframe>
   
 </body>
</html>
